JSON 处理

1. 什么是 JSON？

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。它基于 JavaScript 的一个子集，易于人阅读和编写，同时也易于机器解析和生成。JSON 广泛应用于前后端数据传输、配置文件、API 响应等场景。

1.1 JSON 的基本结构

JSON 数据由键值对组成，键必须是字符串，值可以是字符串、数字、布尔值、数组、对象或 null。以下是一个简单的 JSON 示例：

{
  "name": "Alice",
  "age": 30,
  "isStudent": false,
  "courses": ["Math", "Science"],
  "address": {
    "city": "New York",
    "zip": "10001"
  }
}

1.2 JSON 与 JavaScript 对象的区别

虽然 JSON 看起来很像 JavaScript 对象，但它们有一些关键区别：

• JSON 的键必须是字符串，且必须用双引号括起来。
• JSON 的值只能是字符串、数字、布尔值、数组、对象或 null。
• JSON 不支持函数、日期对象等 JavaScript 特有的数据类型。

2. 在 JavaScript 中处理 JSON

JavaScript 提供了两个主要的方法来处理 JSON：JSON.parse() 和 JSON.stringify()。

2.1 JSON.parse()

JSON.parse() 方法用于将 JSON 字符串解析为 JavaScript 对象。

const jsonString = '{"name": "Alice", "age": 30}';
const person = JSON.parse(jsonString);

console.log(person.name); // 输出: Alice
console.log(person.age);  // 输出: 30

2.2 JSON.stringify()

JSON.stringify() 方法用于将 JavaScript 对象转换为 JSON 字符串。

const person = {
  name: "Alice",
  age: 30
};

const jsonString = JSON.stringify(person);
console.log(jsonString); // 输出: {"name":"Alice","age":30}

2.3 处理嵌套对象和数组

JSON 可以包含嵌套的对象和数组，JSON.parse() 和 JSON.stringify() 都可以处理这些复杂的数据结构。

const jsonString = `{
  "name": "Alice",
  "age": 30,
  "courses": ["Math", "Science"],
  "address": {
    "city": "New York",
    "zip": "10001"
  }
}`;

const person = JSON.parse(jsonString);
console.log(person.courses[0]); // 输出: Math
console.log(person.address.city); // 输出: New York

3. 实践练习

3.1 练习 1：解析 JSON 并访问嵌套数据

编写一个 JavaScript 程序，解析以下 JSON 字符串，并输出 address 对象中的 city 和 zip 字段。

{
  "name": "Bob",
  "age": 25,
  "address": {
    "city": "Los Angeles",
    "zip": "90001"
  }
}

解答：

const jsonString = `{
  "name": "Bob",
  "age": 25,
  "address": {
    "city": "Los Angeles",
    "zip": "90001"
  }
}`;

const person = JSON.parse(jsonString);
console.log(person.address.city); // 输出: Los Angeles
console.log(person.address.zip);  // 输出: 90001

3.2 练习 2：将对象转换为 JSON 字符串

编写一个 JavaScript 程序，将以下对象转换为 JSON 字符串，并输出结果。

const car = {
  brand: "Tesla",
  model: "Model S",
  year: 2020,
  features: ["Autopilot", "Long Range Battery"]
};

解答：

const car = {
  brand: "Tesla",
  model: "Model S",
  year: 2020,
  features: ["Autopilot", "Long Range Battery"]
};

const jsonString = JSON.stringify(car);
console.log(jsonString); // 输出: {"brand":"Tesla","model":"Model S","year":2020,"features":["Autopilot","Long Range Battery"]}

4. 常见问题与解决方案

4.1 JSON 解析错误

如果 JSON 字符串格式不正确，JSON.parse() 会抛出错误。可以使用 try...catch 语句来捕获并处理这些错误。

try {
  const invalidJsonString = '{"name": "Alice", "age": 30,}'; // 错误的 JSON 格式
  const person = JSON.parse(invalidJsonString);
} catch (error) {
  console.error("JSON 解析错误:", error.message);
}

4.2 处理日期对象

JSON 不支持日期对象，因此在序列化和反序列化时需要特别处理。

const person = {
  name: "Alice",
  birthDate: new Date(1990, 5, 15)
};

const jsonString = JSON.stringify(person);
console.log(jsonString); // 输出: {"name":"Alice","birthDate":"1990-06-15T00:00:00.000Z"}

const parsedPerson = JSON.parse(jsonString);
console.log(parsedPerson.birthDate); // 输出: 1990-06-15T00:00:00.000Z (字符串)

5. 总结

JSON 是一种非常强大的数据格式，广泛应用于现代 Web 开发中。通过 JSON.parse() 和 JSON.stringify() 方法，我们可以轻松地在 JavaScript 中处理 JSON 数据。掌握这些基本操作，将帮助你更好地处理前后端数据交互、配置文件读写等任务。

6. 下一步

在掌握了 JSON 处理的基础知识后，你可以继续学习如何使用 AJAX 和 Fetch API 进行网络请求，以及如何在前端应用中动态加载和处理 JSON 数据。这些技能将进一步提升你的 Web 开发能力。